body::-webkit-scrollbar {
   width: 14px;
 }

 body::-webkit-scrollbar-track {
   background: rgb(0, 0, 0)
 }

 body::-webkit-scrollbar-thumb {
   background-color: #FF4F5B;
   /* border-radius: 6px; */

 }

 body {
   background-color: #f9f9f9;
   font-family: 'Roboto', sans-serif;
   scrollbar-color: turquoise;
   text-transform: capitalize;
 }

 html {
   scroll-behavior: smooth;
 }

 /* common element */
 /* .h3{color: #666;font-size: 2.3rem;font-weight: bold;} */
 .button-nav{ width: 60px;
  background-color: #FF4F5B;
  border: none;
  color: #fff;
  padding: 6px;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  text-transform: capitalize;}
 .button {
   width: 150px;
   background-color: #FF4F5B;
   border: none;
   color: #fff;
   padding: 6px;
   border-radius: 25px;
   position: relative;
   overflow: hidden;
   z-index: 0;
   text-transform: capitalize;
 }

 .button::before {
   content: '';
   background-color: black;
   position: absolute;
   width: 0%;
   height: 100%;
   left: 0;
   top: -36%;
   bottom: 0;
   right: 0;
   color: red;
   z-index: -1;
   color: #fff;
 }

 .button:hover::before {
   content: '';
   background-color: #444;
   width: 100%;
   height: 100%;
   ;
   color: #fff;
   transition: all .8s ease-out;
   left: 0;
   top: .2%;
   bottom: 0;
   right: 0;
 }
 #scroll-button {
  
  width: 42px;
  height: 50px;
  position: fixed;
  bottom: 10px;
  right: 14px;
  z-index: 2;
  cursor: pointer;
  text-align: center;
  padding: 9px 0px 0px;
  color: #dfdcdc;
  background-color: #ff4f5b4a;
  border-radius: 5px;
  font-size: 13px;
  transform: translateY(100px);
  transition: all 1s;
  visibility: hidden;
}

 

 /* end common element */
 /* nav */
 .navbar {
   box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
   background-color: #fff;
   padding: 20px 50px;
 }

 .navbar .navbar-collapse {
   justify-content: flex-end;
   ;
 }

 .navbar .navbar-brand {
   color: #666;
 }

 .navbar .navbar-brand:hover {
   color: #666;
 }

 .navbar .collapse .nav-item a {
   color: #999999;
   transition: all .5s cubic-bezier(.16, .8, .62, 1.52);
   ;
   border-bottom: 1px solid transparent;
   /* margin-left: 47px; */
   padding: 0.3rem 10px;
   font-size: 18px;
 }

 .navbar .collapse .nav-item a.li-active {
   color: #FF4F5B;
   border-bottom: 1px solid;
   padding: 0.3rem 10px;
 }

 .navbar .collapse .nav-item a:hover {
   color: #FF4F5B;
   border-bottom: 1px solid;
   padding: 0.3rem 10px
 }

 /* end nav */
 /* start home */
 .home {
   margin-top: 13 0px;
 }

 .home .section1 {
   margin: 0px;
   width: 80%;
   line-height: 1.9;
 }

 .home .section1 span {
   color: #FF4F5B;
   font-size: 23px;
 }

 .home .section1 h3 {
   color: #666;
   font-size: 48px;
   font-weight: bold;
 }

 .home .section1 p {
   color: rgb(150, 146, 146);
 }

 .home .section2 img {
   width: 100%;
 }

 /* end  home */
 .protect {
   margin-top: 50px;
 }

 .protect .box {
   border-radius: 6px;
   background-color: #fff;
   box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
   padding: 26px 40px;
   text-align: center;
   line-height: 1.3;
 }

 .protect .box:hover {
   transform: translateY(-10px);
   transition: transform 1s ease-in;
   transition: all .3s cubic-bezier(.16, .8, .62, 1.52);
 }

 .protect .box img {
   width: 170px;
   margin-bottom: 14px;
 }

 .protect .box h3 {
   font-size: 1.6rem;
 }

 .protect .box p {
   font-size: .9rem;
   color: #999;
   padding: .5rem;
 }

 /* END PROTECT */
 /* START symtoms */
 .Symptoms {
   margin-top: 170px;
 }

 .Symptoms .section1 p {
   font-size: 1rem;
   color: #999;
 }

 .Symptoms .section1 ul {
   font-size: 1rem;
   color: rgb(116, 113, 113);
   padding-left: 16px;
 }

 .Symptoms .section1 {
   font-size: 1rem;
   color: rgb(116, 113, 113);
   padding-left: 16px;
 }

 .Symptoms .section2 img {
   width: 100%;
 }

 /* END symtoms */
 /* START PREVENT */
 .prevent {
   background-color: #222;
   width: 100%;
   margin-top: 100px;
   padding: 30px;
 }

 .prevent .row2 {
   display: flex;
   flex-wrap: wrap-reverse;
 }

 .prevent img {
   width: 100%;
 }

 .prevent p,
 .prevent ul {
   color: #aaa
 }

 .prevent ul {
   margin-left: -26px;
 }

 .prevent h3 {
   color: #fff
 }

 /* END PREVENT */

 /* START WASH YOUR HAND */
 .wash-your-hand {
   margin-top: 120px;
 }

 .wash-your-hand .box {
   border: 1px solid rgba(206, 206, 206, 0.582);
   background-color: #fff;
   box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
   padding: 15px 10px;
   text-align: center;
   line-height: 1.3;
   width: 230px;
   position: relative;
 }

 .wash-your-hand .box span {
   background-color: #FF4F5B;
   color: #FFF;
   padding: 8px 14px;
   border-radius: 50%;
   position: absolute;
   top: -12px;
   left: -15px;
 }

 .wash-your-hand .box img {
   width: 130px;
   margin-bottom: 20px;
 }

 .wash-your-hand .box h3 {
   font-size: 1.2rem;
 }

 /* END WASH YOUR HAND */

 /* START COVID SPREAD */
 .covid-spread {
   margin-top: 120px;
 }

 .covid-spread img {
   width: 100%;
 }

 /* END  COVID SPREAD */
 /* welcom messag */

 .welcom {
   min-width: 100px;
   margin: 100px auto;
 }

 @keyframes animat {
   0% {
     transform: translateY(100px);
   }

   25% {
     transform: translateY(40px)
   }

   50% {
     transform: translateY(100px)
   }

   100% {
     transform: translateY(40px)
   }
 }

 .welcom .welcom-content {
   color: #FF4F5B;
   transform: translateY(100px);
   animation-name: animat;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
 }

 .welcom-child {
   max-width: 500px;
   background-color: rgb(14, 7, 7);
   padding: 20px;
   overflow: hidden;
   border-radius: 5px;
   margin: 100px auto;
   ;
   width: 10px;
   height: 0px;
   ;
   transition: 2s;
 }

 .welcom-child:hover {
   width: 450px;
   height: 150px;
   background-color: #FF4F5B
 }
 .welcom-child .row{padding: 4px;}
 .welcom-child .img-content .img {
   background-color: black;
   width: 100px;
   overflow: hidden;
   border-radius: 50%;
   height: 100px;
   background-position: center;
   background-image: url('../img/mostafa.jpg');
   background-size: cover;
   background-repeat: no-repeat;
 }

 .welcom-child h2 {
   color: #fff;
 }

 .welcom-child p {
   color: #fff;
   margin-top: 3px;
 }

 /* /welcom messag */
 /* FOOTER */
 footer {
   background-color: #333;
   padding: 30px 20px;
 }

 footer h3 {
   color: #fff;
   margin-bottom: 30px;
 }

 footer ul {
   margin-top: -10px;
 }

 footer ul li {
   line-height: 2.5;
 }

 footer p,
 footer a {
   color: #ccc
 }

 footer a:hover {
   text-decoration: none;
   color: #FF4F5B;
   transition: .3s;
 }

 footer .p {
   color: #fff;
   font-size: 20px;
 }

 /* /FOOTER */
 @media(max-width:576px) {

   .welcom-child {
     width: 100px;
     background-color: rgb(14, 7, 7);
     overflow: hidden;
     border-radius: 5px;
     width: 10px;
     height: 0px;
     ;
     transition: 2s;
   }

   .welcom-child:hover {
     width: 220px;
     height: 250px;
     background-color: #FF4F5B;
     padding: 10px;
   }

   .welcom-child .img-content {
     margin: auto;
     text-align: center;
     overflow: hidden;
   }

   .welcom-child .img-content .img {
     background-color: black;
     width: 100px;
     overflow: hidden;
     margin: auto;
     border-radius: 50%;
     height: 100px;
     background-position: center;
     background-image: url('../img/mostafa.jpg');
     background-size: cover;
     background-repeat: no-repeat;
   }

   /* .welcom-child .img-content .img img{ width: 120%;height: 200px;} */
 }

 @media(max-width:768px) {
  .navbar-nav {margin-top:10px;}
   .nav-item{margin: 10px auto 0px;}
   .home .section1 {
     text-align: center;
     margin-top: 20px;
   }

   .home .section1 h3 {
     font-size: 36px;
   }

   .protect .box {
     margin-bottom: 26px;
   }

   .Symptoms .section2 img {
     width: 100%;
     margin-top: 40px;
   }

   .wash-your-hand .box {
     margin: 0px auto 10px auto;
   }
 }

 @media(min-width:768px) and (max-width:992px) {
   .home .section1 {
     text-align: center;
     margin-top: 140px;
   }

   .navbar .collapse .nav-item a {
     margin-left: 2px;
   }

   .protect .box {
     margin-bottom: 26px;
   }

   .Symptoms .section2 img {
     width: 100%;
     margin-top: 40px;
   }


 }
 @media (min-width:768px){ .navbar .collapse .nav-item a {margin-left: 40px;}}

 @media (min-width:992px) {
   .wash-your-hand .div {
     margin: 0;
   }

   .prevent .row2 {
     margin-top: -100px;
   }

   .h3 {
     color: #666;
     font-size: 2.3rem;
     font-weight: bold;
   }

 }